<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="mainApp" />
<script type="text/javascript" src="${resource(dir: 'js', file: 'categoria.js')}"></script>
<script type="text/javascript" src="${resource(dir: 'js', file: 'mubbia.js')}"></script>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery-ui-1.9.2.custom.css')}" type="text/css">
<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-ui-1.9.2.custom.js')}"></script>
<g:javascript src="../tiny_mce/tiny_mce.js"/>
</head>

<body>

	<g:hasErrors bean="${mubbiaInstance}">
		<ul class="errors" role="alert">
			<g:eachError bean="${mubbiaInstance}" var="error">
			<li <g:if test="${error in org.springframework.validation.FieldError}">data-field-id="${error.field}"</g:if>><g:message error="${error}"/></li>
			</g:eachError>
		</ul>
	</g:hasErrors>

	<g:form id="formMubbia" name="formMubbia">
			<g:hiddenField name="mubbiaId" id="mubbiaId" value="${mubbiaInstance?.id }"/>
		
			<div class="separator">&nbsp;</div>
			<div class="row">
				<div class="span12">
					<div class="control-group form-inline">
				    	<div class="controls">
				    		<div class="input-prepend span5 noLeft">
				    			<label class="control-label" for="titulo"><abbr title="Campo obligatorio">T&iacute;tulo (*)</abbr>:&nbsp;&nbsp;</label>
				    			<g:textField class="span4" name="titulo" id="titulo" type="text" maxLength="60" 
				    			placeholder="Escriba un título aquí" value="${mubbiaInstance.titulo}" />
				    		</div>
				    		<div class="input-prepend span3">
				    			<label class="control-label" for="fechaFinalizacion"><abbr title="Campo obligatorio">¿Cuando finaliza? (*)</abbr>:&nbsp;&nbsp;</label>
								<div class="input-append date">
									<input  name="fechaFinalizacion" id="fechaFinalizacion" class="span2" size="16" type="text" value="${mubbiaInstance.fechaFinalizacion?.format('dd/MM/yyyy')}">
									<input  name="fechaHidden" id="fechaHidden" size="16" type="hidden" value="${mubbiaInstance.fechaFinalizacion?.format('dd/MM/yyyy')}">
								</div>
						    </div>
					    </div>
				    </div>
				</div>
			</div>
			
			<div class="separator">&nbsp;</div>
				
			<div class="row">
				<div class="span12">
					<div class="control-group">
				    	<div class="controls">
				    		<div class="input-prepend">
				    			<label class="control-label" for="descripcion">Descripci&oacute;n:</label>
				    			<g:textArea id="descripcion" name="descripcion" rows="12" 
				    			class="span9" value="${mubbiaInstance.descripcion}"></g:textArea>
						    </div>
					    </div>
				    </div>
			    </div>
			</div>
			
			<div class="separator">&nbsp;</div>
				
			<div class="row">
				<div class="span12">
				    <div class="control-group form-inline">
				    	<div class="controls">
				    		<div class="input-prepend span5 noLeft">
				    			<label class="control-label" for="tags">Tags: &nbsp;</label>
				    			<span class="add-on"><i class="icon-tags"></i></span>
				    			<g:textField class="span4" name="tags" id="tags" type="text"
				    			maxLength="100" placeholder="Ingrese los tags para su Mubbia" value="${tags}" />
						    </div>
						    <div class="input-prepend span3">
						    </div>
					    </div>
				    </div>
			    </div>
			</div>   
			
			<div class="separator">&nbsp;</div>
			    
			<div class="row">
				<div class="span12">
				    <div class="control-group form-inline">
				    	<div class="controls">
				    		<div class="input-prepend noLeft">
				    			<label class="control-label" for="categoria">Categor&iacute;a:&nbsp;&nbsp;</label>
				    			<g:select class="span1" id="categoria" name="categoria.id" from="${categorias}" optionKey="id" required="" value="${mubbiaInstance?.categoria?.id}" class="many-to-one"/>
						    </div>
						    <div class="input-prepend" style="margin-left: 30px;">
						    	<span>
						    		<label class="control-label" for="tieneLimiteParticipantes" alt="Elija un minimo y m&aacute;ximo de participantes para su Mubbia">¿Tiene limite de participantes?&nbsp;&nbsp;</label>
						    		<g:checkBox style="margin-bottom: 5px;" name="tieneLimiteParticipantes" id="tieneLimiteParticipantes" onClick="muestraLimiteParticipantes(false);" checked="${mubbiaInstance.tieneLimiteParticipantes}" />
					    		</span>
				    			<span id="MinimoYMaximo">
						    		<span class="input-prepend">
						    			<label class="control-label" for="minimoParticipantes">M&iacute;nimo&nbsp;&nbsp;</label>
						    			<g:textField class="span1" name="minimoParticipantes" id="minimoParticipantes" value="" maxLenght="10" value="${mubbiaInstance?.minimoParticipantes}"/>
								    </span>
								    <span class="input-prepend">
						    			<label class="control-label" for="maximoParticipantes">&nbsp;&nbsp;M&aacute;ximo&nbsp;&nbsp;</label>
						    			<g:textField class="span1" name="maximoParticipantes" id="maximoParticipantes" value="" maxLenght="10" value="${mubbiaInstance?.maximoParticipantes}"/>
								    </span>
							    </span>
						    </div>
			    		</div>
			    	</div>
			    </div>
			</div>
		
			<div class="separator">&nbsp;</div>
		
			<div class="row">
				<div class="span12">
				    <div class="form-actions" align="center">
				 		<g:actionSubmit class="btn btn-success" value="Previsualizar Mubbia" action="previsualizarMubbia" name="previsualizarMubbia"  />
						<g:actionSubmit class="btn" value="Guardar en borradores" action="guardarBorrador" name="guardarBorrador"  />
					</div>
				</div>
		    </div>
	</g:form>
	<script type="text/javascript">muestraLimiteParticipantes(true);</script>
</body>
</html>